<?php
//我是上传图片的模板
//上传代码分三部分。
//1：htmlUI代码，通过定义下面的变量，用于供给js操作。
//athlon的引用，一般是这样子
/*
<li class="layui-form-item icon">
   <label class="layui-form-label">小图：</label>
   <div class="layui-input-block">
        <? include("module/mod-icon-async-upload.php");?>
   </div>
</li>
*/
//2：js部分，用于控制UI显示和接口处理
//3：接口部分，为upload，负责上传和返回数据。
//4：css部分，用于定义UI样式。

//需要增加更多的上传地方在，只需要复制本文件，并且修改初始参数，即可。

$upload_button   = 'upload_button_image3';
$upload_img_view = 'upload_img_view_image3';
$upload_name     = 'upload_name_image3';
$upload_message  = 'upload_message_image3';
$upload_process  = 'upload_process_image3';
$remove_upload   = 'remove_upload_image3';
$input_name      = 'ai_image3';

$now_file_name   = $data['image3'];//当前已经上传了的文件名
?>






        <div class="layui-upload">

            <div class="layui-upload-list">
                <?php if ($now_file_name != 'alpha.gif' && $now_file_name != '') {?>
                <img class="layui-upload-img" id="<?echo $upload_img_view?>" src="/uploadfiles/<? echo $theme_folder ?>/<? echo $now_file_name ?>">
                <?php }else{?>
                <img class="layui-upload-img" id="<?echo $upload_img_view?>" src="/controller/common/asset/image/no_image.jpg">
                <?;} ?>
            </div>


            <div class="upload-message-box">
                <p id="<?echo $upload_message?>"></p>
            </div>


            <div class="upload-process-box">
                <div class="layui-progress layui-progress-small" lay-showpercent="yes"
                     lay-filter="<?echo $upload_process?>">
                <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>


            <button type="button" class="layui-btn layui-btn-xs" id="<?echo $remove_upload?>">清空图片</button>
            <button type="button" class="layui-btn layui-btn-xs" id="<?echo $upload_button?>">上传图片</button>

            <input type="hidden" id="<?echo $upload_name?>" name="<?echo $input_name?>" value="<? echo $now_file_name ?>">


        </div>





<script>
layui.use(['upload', 'element'], function(){
    var $ = layui.jquery,
        upload = layui.upload,
        element = layui.element;

    // 封装图片上传功能为函数
    function initImageUpload(options) {
        var defaults = {
            elem: '',              // 触发按钮ID
            viewElem: '',          // 图片预览元素ID
            nameElem: '',          // 隐藏域元素ID
            messageElem: '',       // 消息显示元素ID
            processFilter: '',     // 进度条过滤器
            removeElem: '',        // 清空按钮元素ID
            noImagePath: '/controller/common/asset/image/no_image.jpg', // 默认图片路径
            uploadUrl: '../controller/script/upload_image.php' // 上传接口地址
        };

        var config = $.extend({}, defaults, options);

        // 初始化上传组件
        var uploadInst = upload.render({
            elem: config.elem,
            url: config.uploadUrl,
            before: function(obj){
                // 预读本地文件
                obj.preview(function(index, file, result){
                    $(config.viewElem).attr('src', result);
                });
                // 重置进度条
                element.progress(config.processFilter, '0%');
            },
            done: function(res){
                // 上传完毕回调
                if(res.code === 0){
                    // 上传成功
                    $('#' + config.messageElem).html('<span style="color: #009688;">上传成功</span>');
                    // 保存图片名称到隐藏域
                    $(config.nameElem).val(res.data.name);
                    // 设置进度条为100%
                    element.progress(config.processFilter, '100%');
                } else {
                    // 上传失败
                    $('#' + config.messageElem).html('<span style="color: #FF5722;">'+res.msg+'</span>');
                    element.progress(config.processFilter, '0%');
                }
            },
            error: function(){
                // 上传失败处理
                var messageBox = $('#' + config.messageElem);
                messageBox.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs upload_reload_button">重试</a>');
                messageBox.find('.upload_reload_button').on('click', function(){
                    uploadInst.upload();
                });
                // 重置进度条
                element.progress(config.processFilter, '0%');
            },
            progress: function(n, elem, res, index) {
                // 更新进度条
                element.progress(config.processFilter, n + '%');
                // 显示进度数字
                $('#' + config.messageElem).html('<span>上传进度：' + n + '%</span>');
            }
        });

        // 绑定清空图片事件
        if (config.removeElem) {
            $(config.removeElem).click(function() {
                $(config.viewElem).attr('src', config.noImagePath);
                $(config.nameElem).val('alpha.gif');
            });
        }

        return uploadInst;
    }



    // 初始化ICON上传功能
    initImageUpload({
        elem: '#<?echo $upload_button?>',
        viewElem: '#<?echo $upload_img_view?>',
        nameElem: '#<?echo $upload_name?>',
        messageElem: '<?echo $upload_message?>',
        processFilter: '<?echo $upload_process?>',
        removeElem: '#<?echo $remove_upload?>'
    });
});
</script>
